<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" th:with="lang=${#locale.language}" th:lang="${lang}">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta http-equiv="Expires" content="-1"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="No-Cache"/>
    <title th:text="${clientName}"></title>
    <link rel="icon" type="image/x-icon" th:href="${faviconPath}">
    <link href="/resources/mobile.css" rel="stylesheet"/>
    <script src="/resources/jquery.min.js"></script>
    <script src="/resources/moment.min.js"></script>
</head>
<!-- login -->
<body>
<div class="ddp-wrap-popup type-page">
    <em class="ddp-bg-popup"></em>
    <div class="ddp-ui-popup-in">
        <!-- popup -->
        <div class="ddp-ui-popup">
            <a id="btnClose" href="javascript:" class="ddp-btn-close" style="display: inline-block !important;"></a>
            <span class="ddp-ui-pop-title" th:text="#{message.app.oauth.reset.passwd.title}"></span>
            <div class="ddp-txt-pop-info ddp-padt0">
                <span th:text="#{message.app.oauth.reset.passwd.description}"></span>
                <br/>
                <span th:text="#{message.app.oauth.reset.passwd.description2}"></span>
            </div>

            <!-- contents -->
            <div class="ddp-ui-user-contet">

                <!-- error 일때 ddp-type-error 추가 -->
                <div id="formInputEmail" class="ddp-ui-input-form">
                    <label class="ddp-label-type" th:text="#{message.app.oauth.join.email}"></label>
                    <div class="ddp-input-check">
                        <input id="inputEmail" type="text" class="ddp-input-type"
                               th:placeholder="#{message.app.oauth.join.email}"/>
                        <em class="sys-form-icon"></em>
                    </div>
                    <!-- error 메시지 -->
                    <span id="msgInputEmail" class="ddp-ui-error"></span>
                    <!-- //error 메시지 -->
                </div>
            </div>
            <!-- //contents -->
            <!-- buttons -->
            <div class="ddp-ui-buttons2">
                <a id="btnDone" href="javascript:" class="ddp-btn-type-popup ddp-bg-black"
                   th:text="#{message.app.oauth.reset.passwd.btn.confirm}"></a>
            </div>
            <!-- //buttons -->

        </div>
        <!-- //popup -->
    </div>
</div>
<!-- //popup wrap -->
<script type="text/javascript" th:inline="javascript">
    /* <![CDATA[ */
    $(document).ready(function () {
        // E-mail
        const $formInputEmail = $('#formInputEmail');
        const $inputEmail = $('#inputEmail');
        const $msgInputEmail = $('#msgInputEmail');

        function setStatusInputForm($elm, type) {
            if ('OK' === type) {
                $elm.removeClass('ddp-type-error').addClass('ddp-type-ok');
                $elm.find('.sys-form-icon').removeClass('ddp-icon-error').addClass('ddp-icon-ok');
            } else if ('ERROR' === type) {
                $elm.removeClass('ddp-type-ok').addClass('ddp-type-error');
                $elm.find('.sys-form-icon').removeClass('ddp-icon-ok').addClass('ddp-icon-error');
            } else if ('CLEAR' === type) {
                $elm.removeClass('ddp-type-ok ddp-type-error');
                $elm.find('.sys-form-icon').removeClass('ddp-type-ok ddp-type-error');
            }
        }   // func - setStatusInputForm

        function validation() {

            const emailReg = /^(\'.*\'|[A-Za-z0-9_-]([A-Za-z0-9_-]|[\+\.])*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z0-9][A-Za-z0-9_-]*(\.[A-Za-z0-9][A-Za-z0-9_-]*)+)$/;

            // Email validation
            let text = $inputEmail.val().trim();
            if (text.length === 0) {
                $msgInputEmail.text('[(#{message.app.oauth.input_email})]');
                setStatusInputForm($formInputEmail, 'ERROR');
                return;
            }

            if (text.match(emailReg) == null) { // 이메일 형식에 맞는지 확인
                $msgInputEmail.text('[(#{message.app.oauth.valid_email})]');
                setStatusInputForm($formInputEmail, 'ERROR');
                return;
            }

            // 이메일 중복체크 API
            $.ajax({
                type: 'get',
                url: '/api/users/email/' + text + '/duplicated',
                headers: {Authorization: /*[[${basicHeader}]]*/},
                success: function (result) {
                    if (result.duplicated === true) {
                        $msgInputEmail.text('');
                        setStatusInputForm($formInputEmail, 'OK');
                    } else {
                        $msgInputEmail.text('[(#{message.app.oauth.alert.reset.passwd.email.not.found})]');
                        setStatusInputForm($formInputEmail, 'ERROR');
                    }
                },
                error: function () {
                    $msgInputEmail.text('[(#{message.app.oauth.valid_email})]');
                    setStatusInputForm($formInputEmail, 'ERROR');
                }
            });
        } // function - validation

        $inputEmail.bind(
            {
                'blur': function () {
                    validation();
                },
                'keydown': function () {
                    setStatusInputForm($formInputEmail, 'CLEAR');
                }
            }
        );
        $('#btnClose').bind( 'click', function() {
            // history.back();
            location.href = '/oauth/authorize' + location.search;
        });
        $('#btnDone').bind('click', function () {
            // required fields
            if ('' === $inputEmail.val().trim() || 1 > $inputEmail.val().length) {
                setStatusInputForm($formInputEmail, 'ERROR');
                $msgInputEmail.text('[(#{message.app.oauth.empty_input})]');
            }

            if (0 === $('.ddp-type-error').length) {
                $.ajax({
                    type: 'post',
                    url: '/api/users/password/reset',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({
                        email: $inputEmail.val()
                    }),
                    success: function () {
                        alert('[(#{message.app.oauth.alert.reset.passwd.email.success})]');
                        history.back();
                    },
                    error: function (error) {
                        alert('[(#{message.app.oauth.alert.reset.passwd.email.fail})]');
                    }
                });
            }
        });
    });
    /* ]]> */
</script>
</body>
</html>
